<template>
  <div class="business-product-center">
    <!-- top -->
    <div class="app-main-content-box top-container">
      <app-main-title title="产品中心" />
      <div class="tab">
        <el-tabs v-model="tabName" @tab-click="handleTabClick">
          <el-tab-pane label="未开通" name="0" />
          <el-tab-pane label="已开通" name="1" />
          <el-tab-pane label="已关闭" name="2" />
        </el-tabs>
      </div>
    </div>

    <div v-loading="loading" class="app-main-content-box content-container">
      <el-row v-if="list.length>0" :gutter="30">
        <el-col v-for="(v,i) in list" :key="i" :xs="12" :sm="8" :md="8" :lg="8" :xl="6">
          <el-card class="box-card" :body-style="{ padding:0 }" shadow="hover">
            <div class="product-info">
              <div class="info-icon">
                <img v-if="v.icon" :src="fileBaseUrl+v.icon" alt>
              </div>
              <div class="info-right">
                <div class="type app-line-one">{{ v.name }}</div>
                <div class="describe app-line-two">{{ v.description }}</div>
              </div>
            </div>
            <div class="btn-group">
              <el-button
                v-if="v.status!==0&&v.webUrl"
                type="text"
                class="btn"
                @click="open(v.webUrl)"
              >功能设置</el-button>
              <el-button
                v-if="v.status===0&&!$store.getters.banBtnList.includes('BTN_FEATURES_OPEN')||v.status===1&&v.canClose&&!$store.getters.banBtnList.includes('BTN_FEATURES_SHUTDOWN')||v.status===2&&!$store.getters.banBtnList.includes('BTN_FEATURES_REOPEN')"
                type="text"
                class="btn"
                @click="changeStatus(v,i)"
              >{{ statusOptions[v.status] }}</el-button>
              <el-button v-if="v.helperUrl" type="text" class="btn" @click="open(v.helperUrl)">查看介绍</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 没有功能 -->
      <div v-if="list.length===0&&!loading" class="nothing">
        <div class="tips-img">
          <img src="../../../assets/icon/i-no-auth.png" alt>
        </div>
        <div class="tips-message">{{ tipsOptions[tabName] }}</div>
        <el-button
          type="primary"
          size="small"
          round
          @click="changeTab"
        >{{ tabName==='0'||tabName==='2'?"查看我已开通的功能":"查看我未开通的功能" }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getFeatureList, saveFeatureConfig } from '@/api/business'
export default {
  data() {
    return {
      // 配置
      statusOptions: ['申请开通', '关闭功能', '启用功能'],
      tipsOptions: [
        '没有未开通的功能啦，快去看看已开通的功能吧。',
        '没有开通的功能啦，快去看看未开通的功能吧。',
        '没有关闭的功能啦，快去看看已开通的功能吧。'
      ],
      tabName: '0', // 0: 未启用, 1:已启用, 2:已关闭
      // 状态
      loading: false,
      // 数据
      list: []
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  mounted() {
    this.initData()
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取功能列表
    initData() {
      this.loading = true
      getFeatureList()
        .then(res => {
          console.log('获取功能列表--', res)
          const list = []
          res.data.forEach(v => {
            if (v.status === Number(this.tabName)) {
              list.push(v)
            }
          })
          this.list = list
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    /**
       * 按钮组
       */
    // 更换状态
    changeStatus(item, i) {
      let message = ''
      if (item.status === 0) {
        message = item.canClose
          ? `确定启用${item.name}`
          : `确定启用${item.name}功能，启用后不可关闭`
      } else if (item.status === 1) {
        message = `确定关闭${item.name}`
      } else {
        message = `确定启用${item.name}`
      }
      this.$confirm(message, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      })
        .then(() => {
          this.loading = true
          const params = {}
          params.status = item.status === 1 ? 2 : 1
          params.sysFeatureId = item.sysFeatureId
          saveFeatureConfig(params)
            .then(res => {
              this.list.splice(i, 1)
              // this.$notify({
              //   title: "成功",
              //   message: params.status === 1 ? "启用成功" : "关闭成功",
              //   type: "success",
              //   duration: 2000,
              //   offset: 40
              // });
              const timeId = setTimeout(() => {
                clearTimeout(timeId)
                this.$confirm(
                  `${
                    params.status === 1
                      ? '启用成功，是否重新刷新页面加载相关功能页面'
                      : '关闭成功，是否重新刷新页面隐藏相关功能页面'
                  }`,
                  '温馨提示',
                  {
                    confirmButtonText: '立即刷新页面',
                    cancelButtonText: '稍后手动刷新',
                    type: 'warning',
                    center: true,
                    roundButton: true
                  }
                )
                  .then(() => {
                    location.reload()
                  })
                  .catch(() => {})
              }, 500)
            })
            .catch(() => {})
            .finally(() => {
              this.loading = false
            })
        })
        .catch(() => {})
    },

    // 切换tab栏
    handleTabClick() {
      this.initData()
    },

    open(url) {
      console.log('功能设置url--', url)
      window.open(url)
    },

    // 点击查看
    changeTab() {
      if (this.tabName === '0' || this.tabName === '2') {
        this.tabName = '1'
      } else {
        this.tabName = '0'
      }
      this.initData()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 头部 */
  .top-container {
    padding: 24px 30px 0;
    border-radius: 5px;
    background-color: #fff;
  }
  /* 内容 */
  .content-container {
    margin-top: 10px;
  }

  /* 卡片 */
  .box-card {
    margin-bottom: 20px;
  }
  .product-info {
    display: flex;
    padding-bottom: 10px;
    padding: 25px 15px;

    .info-icon {
      overflow: hidden;
      flex: 0 0 auto;
      width: 100px;
      height: 100px;
      margin-right: 15px;
      border-radius: 50%;
      border: 1px solid #e7e7e7;
    }
    .info-right {
      flex: 1 1 auto;
      .type {
        font-size: 20px;
        margin-top: 25px;
        font-weight: bold;
      }
      .describe {
        margin-top: 10px;
        font-size: 14px;
        color: $light-font-color;
      }
    }
  }

  /* 按钮组 */
  .btn-group {
    display: flex;
    height: 50px;
    .btn {
      flex: 1;
      padding: 0;
      border-radius: 0;
      margin: 0;
      border-top: 1px solid #e7e7e7;
    }
    .btn + .btn {
      margin-left: 0;
    }
    .btn:not(:last-child) {
      border-right: 1px solid #e7e7e7;
    }
  }

  /* 无数据 */
  .nothing {
    margin: 50px 0;
    text-align: center;
    .tips-img {
      margin: 0 auto;
      width: 307px;
      height: 278px;
    }
    .tips-message {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
    }
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  /* reset element*/
  .business-product-center {
    .el-tabs__header {
      margin-bottom: 1px;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }
</style>
